<template>
    <div class="box1">
        <p>回访客户</p>
        <el-select v-model="value" class="m-2" placeholder="请选择">
            <el-option v-for="item in visitList" :key="item.id" :label="item.customerName"
                :value="item.customerName"></el-option>
        </el-select>
        <p>回访方式</p>
        <el-select v-model="data" class="m-2" placeholder="请选择">
            <el-option v-for="item in SelectList" :key="item.dictLabel" :label="item.dictLabel"
                :value="item.dictLabel"></el-option>
        </el-select>
        <p>录入人</p>
        <el-select v-model="datas" class="m-2" placeholder="请选择">
            <el-option v-for="item in SelectLists" :key="item" :label="item.nickName"
                :value="item.nickName"></el-option>
        </el-select>
        <p>回访日期</p>
        <div class="block">
            <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" :size="size" />
        </div>
        <el-button class="btn" type="primary" :icon="Search">搜索</el-button>
        <el-button class="btn" :icon="Refresh" plain>重置</el-button>
    </div>
    <div class="box2">
        <!-- <ButtonVal /> -->

        <el-button class="btn1" :icon="Plus" type="primary" plain @click="addshow = true">新增</el-button>
        <el-button class="btn1" :icon="Download" type="warning" plain @click="exportFn">导出</el-button>

    </div>

    <el-table ref="multipleTableRef" cell-class-name="align" style="width: 100%;" :data="visitList">
        <el-table-column label="回访客户" prop="customerName" />
        <el-table-column label="回访方式" prop="visitMethod">
            <template #default="{ row }">
                {{
                    row.visitMethod == 0 ? "电话" : row.visitMethod == 1 ? "短信" : row.visitMethod == 2 ? "微信" :
                        row.visitMethod
                            == 3 ? "QQ" : row.visitMethod == 4 ? "上门" :
                            row.visitMethod
                }}
            </template>
        </el-table-column>
        <el-table-column label="回访原因" prop="visitCause" />
        <el-table-column label="回访结果" prop="visitResult" />
        <el-table-column label="回访日期" prop="visitDate" />
        <el-table-column label="录入人" prop="inputUserName" />
        <el-table-column label="录入时间" prop="entryTime" />
    </el-table>

    <ElConfigProvider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryVistList" @current-change="queryVistList" />
        </div>
    </ElConfigProvider>
    <AddVisit :show="addshow" @hide="closeDialog" :customerName="addcustomerName" :visitMethod="addvisitMethod" />
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { Plus, Download, Search, Refresh, Select } from '@element-plus/icons-vue';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { AllCustomerApi, ExportApi, getVisitApi, VisitThingApi } from './api';
import AddVisit from "./AddVisit.vue";
import { saveAs } from "file-saver";

const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const value = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },]

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

const handleSelectionChange = () => {

}

//添加页面

const addcustomerName = ref("")
const addvisitMethod = ref(0);
const editId = ref(0);
const addshow = ref(false)
const closeDialog = () => {
    addshow.value = false;
    editId.value = 0;
    queryVistList();
};

const addFn = (customerName: string, visitMethod: number) => {
    addshow.value = true;
    addcustomerName.value = customerName;
    addvisitMethod.value = visitMethod;
}

const queryParams = reactive<ICustomerListParams>({
    name: "",
    pageNum: 1,
    pageSize: 10,
});
const visitList = ref<IRow[]>([])
const total = ref(0);

const queryVistList = () => {
    getVisitApi(queryParams).then((res) => {
        if (res.code === 200) {
            visitList.value = res.rows;
            // console.log(res);
            total.value = res.total;
        }

    })
}
queryVistList();

//回访方式
const queryLuList = reactive<any>({
    data: [],
});
const data = ref<Ihuifang[]>([])
const SelectList = ref<Ihuifang[]>([])
const queryLu = () => {
    VisitThingApi().then((res) => {
        console.log(res);
        if (res.code === 200) {
            queryLuList.data = res.data
            SelectList.value = res.data.map((item: any) => ({
                ...item,
                dictLabel: item.dictLabel
                ,
            }))
        }
    })
}
queryLu()


const queryList = reactive<any>({
    datas: [],

});

const datas = ref<number[]>([])
const SelectLists = ref<IAddCustomerModel[]>([])
const queryLuMoel = () => {
    AllCustomerApi().then((res) => {
        console.log(res);
        if (res.code === 200) {
            queryList.data = res.data
            SelectLists.value = res.data.map((item: any) => ({
                nickName: item.nickName,
                id: item.userId
            }))
        }
    })
}
//查询关键字
queryLuMoel();

//导出
const exportFn = () => {
    ExportApi(
        {
            pageNum: 1,
            pageSize: 10,
        },
        {
            //导出文件的请求需要额外配置
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        }
    ).then((res) => {
        if (!res) return;
        console.log(res, "88888888888");
        saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([res as any]),
            //设置导出文件名称
            `客户回访记录_${new Date().getTime()}.xlsx`);
    })
}


</script>

<style lang="less" scoped>
.btn1 {
    width: 80px;
}

.box1 {
    display: flex;
    width: 100%;
    margin-bottom: 20px;

    :deep(.el-input) {
        height: 35px;
        width: 200px;
    }

    :deep(.el-range-editor.el-input__wrapper) {
        width: 250px;
    }

    :deep(.el-input--suffix) {
        width: 200px;
    }

    .btn {
        margin-left: 10px;
        width: 80px;
    }


    p {
        width: 100px;
        font-weight: 600;
        height: 35px;
        line-height: 35px;
        color: #666;
        white-space: nowrap;
    }
}

.box2 {
    float: left;
    margin-bottom: 20px;
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

// :deep(.align),
// :deep(.cell) {
//     text-align: center;
// }

:deep(.el-table__cell) {
    text-align: center !important;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>